<nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzWidth="50%" nzTitle="设备检验计划"
           [nzFooter]="footerTpl"
           (nzOnClose)="close()">

  <nz-spin [nzSpinning]="nzLoading">
    <form nz-row nz-form #dataForm="ngForm">

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="code"> 检验编号</nz-form-label>
        <nz-form-control nzErrorTip="Please input code!">
          <input nz-input nzSize="small" id="code" [(ngModel)]="formData.code" name="code" [readOnly]="isUpdate" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="name"> 检验名称</nz-form-label>
        <nz-form-control nzErrorTip="Please input name!">
          <input nz-input nzSize="small" id="name" [(ngModel)]="formData.name" name="name"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="inspection_type"> 检验类型</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="Select a status"
                     [(ngModel)]="formData.inspectionType" name="inspectionType" id="inspection_type">
            <nz-option *ngFor="let item of inspectionType" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="dateRange">生效区间</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <nz-range-picker nzSize="small" id="plan_start_time"
                           [nzFormat]="dateFormat"
                           [(ngModel)]="dateRange"
                           name="dateRange"
                           [nzMode]="'date'" ></nz-range-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="checkFrequency"> 检验频率</nz-form-label>
        <nz-form-control>
          <input nz-input nzSize="small" id="checkFrequency" [(ngModel)]="formData.checkFrequency" name="checkFrequency"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="corn"> corn表达式</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleCode!">
          <input nz-input nzSize="small" id="corn" [(ngModel)]="formData.corn" name="corn"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="user"> 负责人</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="Select a status"
                     [(ngModel)]="formData.userId" name="userId" id="user">
            <nz-option *ngFor="let item of users" [nzLabel]="item.username" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

    </form>

    <nz-tabset>
      <nz-tab nzTitle="检验项目">
        <div>
          <div>
            <button nz-button nzType="primary" nzSize="small" (click)="addOneRows()" [disabled]="isView">
              <span>添加行</span>
            </button>
            <button nz-button class="ml-sm" nzSize="small" (click)="delTable()" [disabled]="isView">
              <span>删除行</span>
            </button>
            <nz-divider [nzDashed]=true style="margin: 5px" ></nz-divider>
          </div>
          <div class="table-container">
            <nz-table  #basicTable [nzData]="listOfData" [nzBordered]="true"
                      nzSize="small"
                      [nzShowPagination]="false"
                      [nzFrontPagination]="false"
            >
              <thead>
              <tr>
                <th nzShowCheckbox [width]="30"
                    (nzCheckedChange)="checkAllInspectionList($event)"></th>
                <th [nzAlign]="'center'">设备信息</th>
                <th [nzAlign]="'center'">检验模板</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of basicTable.data;let index_=index">
                <td nzShowCheckbox [width]="30" [(nzChecked)]="data['checked']"></td>
                <td>
                  <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="请选择设备"
                             [(ngModel)]="data['deviceId']">
                    <nz-option *ngFor="let item of devices" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
                  </nz-select>
                </td>
                <td>
                  <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="请选择检验模板"
                             [(ngModel)]="data['templateId']">
                    <nz-option *ngFor="let item of templates" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
                  </nz-select>
                </td>
              </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
      </nz-tab>

    </nz-tabset>

  </nz-spin>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm()">保存</button>
    </div>
  </ng-template>
</nz-drawer>
